<style>
    /* 根据字数修改 */
    .layui-form-label {
        width: 100px;
        text-align: left;
    }

    .layui-mini {
        display: inline-block;
        width: 100px;
        height: 24px;
        border-radius: 4px;
    }

    .layui-input-wrap {
        width: 100px;
        line-height: 24px;
        display: inline-block;
    }




    .card-edit .base-card {
        background: rgba(0, 0, 0, .0196078431) !important
    }

    .list-item,
    .list {
        display: flex;
        align-items: baseline;
        padding: 12px 10px;
        flex-wrap: wrap;
        border-radius: 4px;
    }

    .card-edit .list-item {
        border: 1px solid #fff;
        background: #fff;
    }

    .card-edit .list-item.active {
        border: 1px solid var(--primary-color);
        background: var(--primary-hover-color);
    }

    .tip {
        color: #00000073;
        margin-left: 12px;
        font-size: 12px;
        width: 100%;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <!-- 用于创建子页面 -->
    <div class="page-create"></div>
    <!-- page-main-create -->
    <!-- 用于显示 隐藏 -->
    <div class="layuimini-main page-main-create">
        <form id="pane-0" class="pane-form layui-form" action="">
            <div class="title-row layuimini-title title-sticky">
                <div class="title-left">
                    <h4><span> <i class="layui-icon layui-icon-return anticon mr-1" id="backBtn"></i>计时积分工单加减分规则</span>
                    </h4>
                </div>
                <div class="title-right">
                    <span class="title-right-text">
                        <button class="layui-btn layui-btn-primary layui-btn-sm cancel-btn " lay-on="cancel">取消</button>
                        <button class="layui-btn layui-btn-normal layui-btn-sm save-btn " lay-submit
                            lay-filter="saveBtn">保存</button>
                    </span>
                </div>
            </div>
            <div class="section">
                <div class="top-panel card-edit p-5 mb-5">
                    <div class="layui-bg-orange-500 p-5 base-card">
                        <div class="title-row">
                            <div class="title-left">
                                <div class="title-info">
                                    <div class="title-line"></div>
                                    <span class="title-text">计时工单加减分规则</span>
                                </div>
                            </div>
                        </div>

                        <div class="layui-row layui-col-space10 layui-font-gray">
                            <div class="layui-col-md4">
                                <div class="list-item active">
                                    <div class="checkbox-input ">
                                        <input type="checkbox" name="laterTimeCheck" checked>
                                    </div>
                                    <span class="sub-title">迟到/早退减分：</span>
                                    <span class="form-input  layui-font-black  ">
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>分 / 每单每次</span>
                                    </span>
                                    <div class="layui-font-12 tip">&emsp;</div>

                                </div>

                            </div>
                            <div class="layui-col-md4 ">
                                <div class="list-item active">
                                    <div class="checkbox-input ">
                                        <input type="checkbox" name="halfDayCheck" checked>
                                    </div>
                                    <span class="sub-title">半天旷工：</span>
                                    <span class="font-weight layui-font-black">每单按50%工单积分</span>
                                    <div class="layui-font-12 tip">（旷工时间段内积分为0，不再加减分）</div>
                                </div>

                            </div>
                            <div class="layui-col-md4">
                                <div class="list-item">
                                    <div class="checkbox-input ">
                                        <input type="checkbox" name="allDayCheck">
                                    </div>
                                    <span class="sub-title">全天旷工：</span>
                                    <span class=" font-weight layui-font-black">每单按0%工单积分</span>
                                    <div class="layui-font-12 tip">（旷工时间段内积分为0，不再加减分）</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- 质量工单、额外计件工单、计时子工单与异常事件减分规则 -->
                <div class="top-panel card-edit p-5 mb-5">
                    <div class="layui-bg-red-500 p-5 base-card">
                        <div class="title-row">
                            <div class="title-left">
                                <div class="title-info">
                                    <div class="title-line"></div>
                                    <span class="title-text">质量工单、额外计件工单、计时子工单与异常事件减分规则</span>
                                </div>
                            </div>
                        </div>

                        <div class="layui-row layui-col-space10 layui-font-gray">
                            <div class="layui-col-md4">
                                <div class="list-item active">
                                    <div class="checkbox-input ">
                                        <input type="checkbox" name="laterTimeCheck" checked>
                                    </div>
                                    <span class="sub-title">每日减分上限：</span>
                                    <span class="form-input  layui-font-black  ">
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>分</span>
                                    </span>
                                </div>
                            </div>
                            <div class="layui-col-md4 ">
                                <div class="list-item active">
                                    <div class="checkbox-input ">
                                        <input type="checkbox" name="laterTimeCheck" checked>
                                    </div>
                                    <span class="sub-title">工单验收不通过減分范围：</span>
                                    <span class="form-input  layui-font-black  ">
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>至</span>
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>分</span>
                                    </span>
                                </div>
                            </div>
                            <div class="layui-col-md4 ">
                                <div class="list-item active">
                                    <div class="checkbox-input ">
                                        <input type="checkbox" name="laterTimeCheck" checked>
                                    </div>
                                    <span class="sub-title">工单抽查不通过减分范围：</span>
                                    <span class="form-input  layui-font-black  ">
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>至</span>
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>分</span>
                                    </span>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="list-item active">
                                    <div class="checkbox-input ">
                                        <input type="checkbox" name="laterTimeCheck" checked>
                                    </div>
                                    <span class="sub-title">坐岗减分：</span>
                                    <span class="form-input  layui-font-black  ">
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>分</span>
                                    </span>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="list-item active">
                                    <div class="checkbox-input ">
                                        <input type="checkbox" name="laterTimeCheck" checked>
                                    </div>
                                    <span class="sub-title">离岗减分：</span>
                                    <span class="form-input  layui-font-black  ">
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>分</span>
                                    </span>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="list-item active">
                                    <div class="checkbox-input ">
                                        <input type="checkbox" name="laterTimeCheck" checked>
                                    </div>
                                    <span class="sub-title">一人多机减分：</span>
                                    <span class="form-input  layui-font-black  ">
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>分</span>
                                    </span>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="list-item ">
                                    <div class="checkbox-input ">
                                        <input type="checkbox" name="allDayCheck">
                                    </div>
                                    <span class="sub-title">网格内出勤时长未达标减分：</span>

                                    <span class="form-input  layui-font-black  ">
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>分</span>
                                    </span>
                                    <div class="layui-font-12 tip">（多作业网格时才生效）</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 工单作业业务外有效报事加分规则 -->

                <div class="top-panel card-edit p-5 mb-5">
                    <div class="layui-bg-green-500 p-5 base-card">
                        <div class="title-row">
                            <div class="title-left">
                                <div class="title-info">
                                    <div class="title-line"></div>
                                    <span class="title-text">工单作业业务外有效报事加分规则</span>
                                </div>
                                <div class="layui-font-12 layui-font-gray">
                                    （有效报事——报事成功转工单，并且工单请求类非积分工单请求类）
                                </div>

                            </div>
                        </div>


                        <div class="layui-row layui-col-space10 layui-font-gray">
                            <div class="layui-col-md4">
                                <div class="list-item active">
                                    <div class="checkbox-input ">
                                        <input type="checkbox" name="laterTimeCheck" checked>
                                    </div>
                                    <span class="sub-title">每日加分上限：</span>
                                    <span class="form-input  layui-font-black  ">
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>分</span>
                                    </span>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="list-item active">
                                    <div class="checkbox-input ">
                                        <input type="checkbox" name="laterTimeCheck" checked>
                                    </div>
                                    <span class="sub-title">每单加分：</span>
                                    <span class="form-input  layui-font-black  ">
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>分</span>
                                    </span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>




                <!-- 人员等级 -->

                <div class="top-panel card-edit p-5 mb-5">
                    <div class="layui-bg-blue-500 p-5 base-card">
                        <div class="title-row">
                            <div class="title-left">
                                <div class="title-info">
                                    <div class="title-line"></div>
                                    <span class="title-text">人员等级</span>
                                </div>
                            </div>
                        </div>


                        <div class="layui-row layui-col-space10 layui-font-gray">
                            <div class="layui-col-md12">
                                等级显示：
                                <input type="radio" name="AAA" value="1" title="显示">
                                <input type="radio" name="AAA" value="2" title="隐藏" checked>
                            </div>
                            <div class="layui-col-md4">
                                <div class="list">
                                    <span class="sub-title">新手：</span>
                                        有效接单工时低于
                                        <span class="font-weight">小时</span>
                                    </span>
                                    <span class="form-input  layui-font-black  ">
                                        有效接单工时低于
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>小时</span>
                                    </span>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="list">
                                    <span class="sub-title">熟手：</span>
                                        有效接单工时低于
                                        <span class="font-weight">小时</span>
                                    </span>
                                    <span class="form-input  layui-font-black  ">
                                        有效接单工时低于
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>小时</span>
                                    </span>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="list">
                                    <span class="sub-title">老手：</span>
                                        有效接单工时低于
                                        <span class="font-weight">小时</span>
                                    </span>
                                    <span class="form-input  layui-font-black  ">
                                        有效接单工时低于
                                        <input type="text" name="laterTime" lay-verify="required" lay-affix="number"
                                            placeholder="请输入" step="1" min="0" max="100" class="layui-input layui-mini">
                                        <span>小时</span>
                                    </span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </form>


    </div>
</div>
<script>
    layui.use(['form', 'table', 'tabs', 'miniPage', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            tabs = layui.tabs,
            laydate = layui.laydate,
            layer = layui.layer,
            util = layui.util,
            element = layui.element,
            miniPage = layui.miniPage;
        /******************** 事件 start ********************/
        form.render();
        $('#backBtn').on('click', function () {
            miniPage.backPageCreate()
        });
        /******************** 事件 end ********************/
        util.on('lay-on', {
            'edit': function () {
                miniPage.backPageCreate()

            },
            'cancel': function () {

               miniPage.backPageCreate()
            },
        })
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                // 关闭弹出层
                layer.close(index);

            });


            return false;
        });
        //监听提交
        form.on('submit(saveBtn1)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                // 关闭弹出层
                layer.close(index);

            });


            return false;
        });



        /******************** 渲染组件 start ********************/

        // 指定开关事件
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关 checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
        });


        form.render('select'); //刷新select选择框渲染
        // 起始日期
        laydate.render({
            elem: '#date_period_start',
            range: true
        });
        // 截止日期
        laydate.render({
            elem: '#date_period_end',
            range: true
        });
        // 初始化选项卡
        tabs.render({
            elem: '#planTabs',
            index: 0// 默认选中
        });

        // planTabs 切换事件
        tabs.on('afterChange(planTabs)', function (data) {
            var tabIndex = data.index;
            // 隐藏所有 pane-form
            $('.pane-form').addClass('');

            // 显示当前 tab 对应的 pane-form
            $('#pane-' + tabIndex).removeClass('');
        });




        /******************** 渲染组件 end ********************/


        // 开启监听 折叠展开事件
        miniPage.listen()

    });
</script>